<template>
  <el-row id="cpts-role-manage-type">
    <el-row v-if="!isViewShow" class="permission">
      没有权限!
    </el-row>
    <el-card v-else class="box-card">
      <div slot="header" class="clearfix">
        <span>用户管理</span>
        <el-button :disabled="!isViewEdit" style="float: right; padding: 6px 6px;margin-right: 10px" type="primary" @click="handleAdd">添加<i
          class="el-icon-plus el-icon--right"></i></el-button>
      </div>

      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%;"
        max-height="644">
        <el-table-column
          align="center"
          prop="name"
          label="用户名">
        </el-table-column>
        <el-table-column
          align="center"
          prop="roleName"
          label="用户角色">
        </el-table-column>
        <el-table-column
          align="center"
          prop="position"
          label="职务">
        </el-table-column>
        <el-table-column
          align="center"
          prop="workNumber"
          label="工号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="workPosition"
          label="工位">
        </el-table-column>
        <el-table-column
          align="center"
          prop="phone"
          label="手机号码">
        </el-table-column>


        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button :disabled="!isViewEdit"
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button :disabled="!isViewEdit"
                       size="mini"
                       type="danger"
                       @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>

    </el-card>

    <!--配置弹窗-->
    <el-dialog :visible.sync="addDialogShow">
      <el-row slot="title">
        <span style="font-size: 18px">新增/编辑</span>
        <el-button @click="handleSubmit('ruleForm')" style="margin-left: 1100px; padding: 6px 10px" type="primary" :loading="false">提交</el-button>
      </el-row>

      <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="120px">

        <el-row>
          <el-col :span="8">
            <el-form-item label="用户名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="密码" prop="password">
              <el-input v-model="ruleForm.password"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户角色" prop="roleId">
              <el-select ref="select" v-model="ruleForm.roleId" placeholder="请选择">
                <el-option
                  v-for="item in fields"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="职务" prop="position">
              <el-input v-model="ruleForm.position"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工号" prop="workNumber">
              <el-input v-model="ruleForm.workNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工位" prop="workPosition">
              <el-input  v-model="ruleForm.workPosition"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>


    </el-dialog>

  </el-row>
</template>

<script>
  export default {
    name: "roleManage",
    data() {
      return {
        isViewShow: false,
        isViewEdit: false,
        activeName: '1',
        addDialogShow: false,
        tableData: [],
        fields: [],
        ruleForm: {
          id: '',
          name: "",
          password: "",
          position: "",
          workNumber: "",
          phone: "",
          workPosition: "",
          roleId: "",
        },
        rules:{
          name:[
            { required: true, message: '请输入', trigger: 'blur' },
          ],
          password:[
            { required: true, message: '请输入', trigger: 'blur' },
          ],
          position:[
            { required: true, message: '请输入', trigger: 'blur' },
          ],
          workNumber:[
            { required: true, message: '请输入', trigger: 'blur' },
          ],
          phone:[
            { required: true, message: '请输入', trigger: 'blur' },
          ],
          workPosition:[
            { required: true, message: '请输入', trigger: 'blur' },
          ],
          roleId:[
            { required: true, message: '请输入', trigger: 'blur' },
          ]
        }
      }
    },
    mounted() {
      let obj = this.validateGlobal.getPermission(18)
      this.isViewShow = obj.isViewShow
      this.isViewEdit = obj.isViewEdit
      this.askUserList()

    },
    methods: {
      resetForm() {
      /*  if (this.$refs['ruleForm']!==undefined) {
          this.$refs['ruleForm'].resetFields();
        }*/
        this.ruleForm = {
            id: '',
            name: "",
            password: "",
            position: "",
            workNumber: "",
            phone: "",
            workPosition: "",
            roleId: "",
        }
      },
      handleAdd() {
        this.askRoleList()
        if (!this.addDialogShow) {
          this.addDialogShow = true
        }
        this.resetForm()
      },
      handleEdit(index,rows) {
        this.askRoleList()
        if (!this.addDialogShow) {
          this.addDialogShow = true
        }
        let row = this.validateGlobal.cloneObject(rows)
        this.ruleForm = {
          id: row.id,
          name: row.name,
          password: row.password,
          position: row.position,
          workNumber: row.workNumber,
          phone: row.phone,
          workPosition: row.workPosition,
          roleId: row.roleId,
        }
      },
      handleSubmit(formName){
        let _that = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            _that.postNewDatas()
          } else {
            _that.$message('输入有误!');
            return false;
          }
        });
      },
      handleCheckChange(data, checked, indeterminate) {
        console.log(data, checked, indeterminate);
      },
      handleNodeClick(data) {
        console.log(data);
      },
      handleDelete(index,row){
        let _that = this
        let userId = sessionStorage.getItem("userId")
        let url = _that.ports.roleManage.userDelete
        let askData = {
          userId: userId,
          id:row.id,
        }
        this.http.get(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            _that.$message('删除成功!');
            _that.askUserList()
          }else{
            _that.$message('删除失败!');
          }
        })
      },
      askUserList() {
        let _that = this
        let userId = sessionStorage.getItem("userId")
        let url = _that.ports.roleManage.userList
        let askData = {
          userId: userId,
        }
        this.http.get(url, askData, res => {
          if (!_that.validateGlobal.isEmpty(res) && res.code == 200) {
            _that.tableData = res.data
          } else {
            _that.$message('数据获取失败!');
          }
        })
      },
      askRoleList(){
        let _that = this
        let userId = sessionStorage.getItem("userId")
        let url = _that.ports.roleManage.roleList
        let askData = {
          userId: userId,
        }
        this.http.get(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            _that.fields = res.data
          }else{
            _that.$message('数据获取失败!');
          }
        })
      },
      postNewDatas(){
        let _that = this
        let userId =sessionStorage.getItem("userId")
        let url = _that.ports.roleManage.userAdd + '?userId=' + userId
        let askData = this.ruleForm
        this.http.post(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            _that.$message('添加/修改成功!');
            _that.addDialogShow = false
            _that.resetForm()
            _that.askUserList()
          }else{
            _that.$message('添加/修改失败!');
          }
        })
      },
    }

  }
</script>

<style lang="scss">
  #cpts-role-manage-type {

    > .el-card {
      margin: 20px 20px 0 20px;
      height: 780px;
    }

    .el-dialog {
      width: 1300px;
    }

    .el-select{
      width: 300px;
    }
  }
</style>
